<template>
  <div class="root">
    {{ number }}
    <button @click="add">add</button>

    <ul>
      <li>{{ myname }} --- {{ myage }}</li>
    </ul>

    <demo title="11111" @handleClick="handleClick"></demo>

    <!-- 动态组件的使用其实没有什么太大的改变，像我这样写就好 -->
    <component :is="number % 2 == 0 ? list : navbar" v-yellow-color></component>
  </div>
</template>

<!-- 不知道你发现没有，setup函数用起来十分麻烦，不仅要定义东西，最后还要在一起return出去，搞不好就会忘掉把某个数据return出去，然后导致报错，好在vue给我们提供了一个语法糖，我们只需要再script标签中加上一个setup属性，便不用再把定义的数据什么的return，组件直接引入也不用再注册，太多方便的地方等你发现。

    官方给出的使用setup语法糖的优势：
      更少的样板内容，更简洁的代码。
      能够使用纯TypeScript声明props和自定义事件。
      更好的运行时性能(其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
      更好的IDE类型推导性能(减少了语言服务器从代码中抽取类型的工作)。
-->
<script setup>
import { reactive, ref, toRefs, provide } from "vue";

// 引入组件也很简单，直接引入即可，无需自己注册
import demo from "./demo.vue";
import list from "./list.vue";
import navbar from "./navbar.vue";

const number = ref(0);
const add = () => {
  number.value++;
  myname.value = "xiaoming";
};

// 也许你会有疑问，既然不用自己return了，那我如果想用toRefs()该怎么办呢?很简单，自己解构赋值定义呗
const state = reactive({
  myname: "mikaisa",
  myage: 18,
});
const { myname, myage } = toRefs(state);

const handleClick = (val) => {
  alert(val);
};

// provide的使用也没啥区别
provide("datalist", reactive(["11111", "22222", "33333"]));

// 局部自定义指令，注意这里务必写成驼峰vXxxXxx，模板里使用就写成v-xxx-xxx即可, 函数中可以拿到用了这个指令的dom节点本身，所以可以自定义背景颜色。当然自定义指令写法不止这一种，可以复习一下。
const vYellowColor = (el) => {
  console.log(el);
  el.style.backgroundColor = "yellow";
};
</script>

<style scoped>
</style>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>
